<template>
	<view class="background" style="box-sizing: border-box;" v-show="show">
		<view class="">
			<view class="xuanzhong">
				<view class="selected">选中民宿</view>
				<view class="selectedhotel">
					<view class="dianming">{{selectshopinfo.name}}</view>
					<view class="flexbetween box1">
						<view class="dizhi">{{selectshopinfo.address}}</view>
						<view class="juli">据您<text
								style="color:rgba(0, 210, 225, 1)">{{selectshopinfo.distance}}</text>km</view>
					</view>
				</view>
			</view>
			<view class="otherhotel">
				<view class="selected">其他民宿</view>
				<view class="flexcenter" v-if="!shoplist.data.length">
					<view class="placeholderimg" style="margin-top: 300rpx;">
						<image src="../../static/images/bg-icons/placeholderimg.png" mode=""></image>
					</view>
				</view>
				<view class="selectedhotel" v-for="item in shoplist.data" :key="item.id" @click="selecthotel(item)">
					<view class="dianming">{{item.name}}</view>
					<view class="flexbetween box1">
						<view class="dizhi">{{item.address}}</view>
						<view class="juli">据您<text style="color:rgba(0, 210, 225, 1)">{{item.distance}}</text>km</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				selectshopinfo: {},
				shoplist: {
					data: []
				},
				limit: 18,
				page: 1,
				listid: "",
				lat: "",
				lng: "",
				
				show:false,
			};
		},
		// onLoad(options) {},
		onLoad(options) {
			this.listid = options.id
			this.getshoplist()
			this.getlocation()
		},
		methods: {
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						if (_this.listid == "") {
							_this.inithotelname()
						} else {
							_this.getselectshopinfo()
						}
					}
				});

			},
			//默认酒店信息
			inithotelname() {
				httpRequest.request('api/goods/shopDetail', 'GET', {
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.selectshopinfo = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			//获取选中酒店信息
			getselectshopinfo() {
				httpRequest.request('api/goods/getCurrShop', 'GET', {
					shop_id: this.listid,
					lat: this.lat,
					lng: this.lng
				}, false, false, false).then(res => {
					this.show=true
					if (res.code == 1) {
						console.log(res.data)
						this.selectshopinfo = res.data
					}
				}).catch(err => {
					this.show=true
					httpRequest.toast(err.msg);
				})
			},
			//获取酒店列表
			getshoplist(isPage, page, id) {
				let _this = this
				httpRequest.request('api/goods/shopList', 'GET', {
					shop_id: this.listid,
					page: page || 1,
					limit: _this.limit,
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.shoplist;
						if (isPage == true) {
							_this.shoplist.data = dataList.data.concat(resList.data);
						} else {
							this.shoplist = res.data
							_this.shoplist.data = resList.data;
						}

					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			//选择酒店
			selecthotel(item) {
				uni.$emit("gethotelid", item.id)
				uni.navigateBack(1)
			}
		},

		onReachBottom() {
			let _this = this;
			let list = _this.goodslist;
			let page = _this.page;
			if (list.last_page <= page) {
				return false;
			}
			page++;
			_this.page = page;
			_this.init(true, page);
		},
	}
</script>

<style lang="scss">
	.xuanzhong {
		padding: 30rpx;
		background-color: #FFFFFF;
	}

	.selected {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 33rpx;
		padding-bottom: 20rpx;
		border-bottom: solid 2rpx rgba(241, 241, 241, 1);
	}

	.selectedhotel {
		margin-top: 30rpx;

		.dianming {
			font-size: 26rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			line-height: 30rpx;
		}

		.box1 {
			margin-top: 30rpx;

			.dizhi {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 28rpx;
			}

			.juli {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 28rpx;
				white-space: nowrap;
			}
		}
	}

	.otherhotel {
		padding: 30rpx;
		background-color: #FFFFFF;
		margin-top: 30rpx;
	}

	.th {
		border-bottom: solid 2rpx rgba(241, 241, 241, 1);
		padding-bottom: 30rpx;
	}
</style>
